<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOMContentLoaded</title>
<link rel="stylesheet" href="../../css-libs/common.css">
<style>
    .btn-wrapper {margin:6% auto;}
</style>
</head>

<body>
<script src="../../js-libs/global.js"></script>
<script>
    // DOMContentLoaded先触发，load后触发
    // load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded)。
    // load事件是在当一个资源和与其依赖资源加载完成后触发的。
    window.onload = function(event) {
        console.log("load 事件触发！");
        alert(document.readyState);
    };

    // 页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件，HTML文档不会等待样式文件,图片文件,子框架页面的加载。
    if(document.addEventListener){
        addEvent("DOMContentLoaded", document, function(){
            console.log("DOM fully loaded and parsed");
            alert(document.readyState);     // "interactive"，可以交互的
        });
    }else{
        document.onreadystatechange = function () {     // 在IE浏览器的仿真模式下触发的次数有所不同
            console.log("The readystate is changed!");
            if (document.readyState == "interactive") {
                console.log("DOM fully loaded and parsed(lte IE8)");
                alert(document.readyState);
            }
        };
    }
    alert(document.readyState);
</script>
</body>
</html>
